<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> {{ seriesName }}</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <radioGroup ref="radioGroup" @radioChange="filterYearChange" v-show="isTimeFilter"></radioGroup>
                    <p>图表上的圆形标注点为历史数据最大值及最小值</p>
                    <div class="chart-div" style="height: 300px;">
                        <template v-if="chartsType == 'line'">
                            <LineCharts
                                    :domID="domID"
                                    :chartsData="chartsData"
                                    :seriesName="seriesName"
                                    :yAxis_axisLabel_formatter="yAxis_axisLabel_formatter"
                                    :markPoint_formatter="markPoint_formatter">
                            </LineCharts>
                        </template>
                        <template v-else-if="chartsType == 'Area'">
                            <LargeScaleAreaCharts
                                    :domID="domID"
                                    :chartsData="chartsData"
                                    :seriesName="seriesName"
                                    :isMultiply100="isMultiply100">
                            </LargeScaleAreaCharts>
                        </template>
                        <template v-else-if="chartsType == 'bar'">
                            barCharts
                        </template>
                        <template v-else-if="chartsType == 'pie'">
                            pieCharts
                        </template>
                    </div>
                </article>
                <h4 ref="chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
        </div>
    </div>
</template>

<script>
    import LineCharts from '../components/wxMiniProgramCharts/LineCharts.vue';//公共组件——时间轴折线图
    import LargeScaleAreaCharts from '../components/wxMiniProgramCharts/LargeScaleAreaCharts.vue';//公共组件——%大数据量面积折线图

    import { radioGroup } from '@/mixin/echarts_radio';//公共mixin混入——radio-group组件

    export default {
        mixins: [radioGroup],
        data() {
            return {
                houseId: this.$route.query.houseId || null, //房源ID
                zip: this.$route.query.zip || null, //房源zip
                chartsType: this.$route.query.chartsType || 'line',  //图表类型
                domID: this.$route.query.domID || '',  //图表父元素的id
                APIurl: this.$route.query.APIurl || '',  //图表接口url
                seriesName: this.$route.query.seriesName ? decodeURIComponent(this.$route.query.seriesName) : '',  //图表的图例名
                yAxis_axisLabel_formatter: this.$route.query.yAxis || '',  //图表的坐标轴刻度标签的相关设置，通常用于价钱相关图表的格式化
                markPoint_formatter: this.$route.query.markPoint || '',  //图表最小最大值标注的相关设置，通常用于价钱相关图表的格式化
                isMultiply100: this.$route.query.isMultiply100 == '1' ? true : false,  //图表图例的value是否需要*100，通常用于价钱相关图表的格式化
                isTimeFilter: this.$route.query.isTimeFilter == '1' ? true : false,  //是否展示年份筛选功能

                chartNoDataShow: false, //判断是否有无数据
                chartsData: null,//图表所需数据
                isDisposed: false,//是否销毁图表实例

            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
            console.log(this.zip)
            console.log(this.chartsType)
            console.log(this.domID)
            console.log(this.APIurl)
            console.log(this.seriesName)
            console.log(this.yAxis_axisLabel_formatter)
            console.log(this.markPoint_formatter)
            console.log(this.isMultiply100)
            console.log(this.isTimeFilter)
            console.log(this.$route.query.isTimeFilter)

            this.getDatas(3);
        },
        methods: {
            //获取图表所需数据
            getDatas(filterYearValue) {
                let url = this.isTimeFilter ? `${ this.APIurl }?t=${ filterYearValue }` : this.APIurl;

                this.$get(url).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.chartsData = res.data;
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.chart_NoData.innerText = res.msg;
                    }
                });
            },
            //接收公共mixinradio-group组件的change事件——按年份筛选
            filterYearChange(filterYearValue) {
                this.getDatas(filterYearValue);
            },

        },
        components: {
            LineCharts,//公共组件——时间轴折线图
            LargeScaleAreaCharts,//公共组件——%大数据量面积折线图
            radioGroup,//公共mixin混入——radio-group组件

        }
    }
</script>


<style lang="less" type="text/less">
    .echart-chart {
        > .inside {
            border: 1px solid #dee2e5;
            padding: 0;
            > header {
                padding: 13px 20px;
                background: #edf7ff;
                font-size: 18px;
                color: #242424;
                border-bottom: 1px solid #dee2e5;
                > i {
                    font-size: 20px;
                    color: #ff7500;
                }
            }
            > .chartBox {
                width: 100%;
                text-align: center;
                position: relative;
                background: #fff;
                >article {
                    > .el-radio-group {
                        padding: 15px 0;
                        > .el-radio + .el-radio {
                            margin-left: 15px;
                        }
                    }

                    > .regionType-button {
                        > div {
                            padding: 10px;
                            float: right;
                        }
                    }

                    > .chart-div {
                        width: 100%;
                        height: 250px;
                    }

                    > p {
                        color: #ff7b2c;
                        text-align: left;
                        margin: 5px 0;
                        padding: 0 20px;
                    }
                }
                > h4 {
                    min-height: 100px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 20px;
                    color: #000;
                    text-align: center;
                }
                aside {
                    text-align: left;
                    padding: 20px;
                    > p {
                        line-height: 30px;
                        color: #000;
                        > span {
                            color: #858585;
                        }
                    }
                }
            }
        }
    }

</style>
